<!DOCTYPE html>
<html>
<head>
<title>添加小组评分页面</title>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script src="../../script/mui.min.js"></script>
	<script src="../../script/jquery.min.js"></script>
	<script src="../../script/jquery.knob.js"></script>
	<link rel="stylesheet" href="../../css/mui.min.css" />
    <link rel="stylesheet" href="../../css/CFNetPP_Base.css">
    <link rel="stylesheet" href="../../css/base.css"/>
    <link rel="stylesheet" href="../../css/testscore.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
    <style>
    	body,html{
    		width: 100%;
    		/* overflow-x: hidden; */
    	}
    	th{
    		font-size: 20px;
    		text-align: center;
    		height: 40px;

    	}
    	td{
    		font-size: 18px;
    		text-align: center;
    		height:40px;
            border: 1px solid #F2F2F2;

    	}
    	table{
    		width: 100%;
    	}
    	.weih{
    		width: 120px;

    	}
    	.weihs{
    		width: 40px;
    		height:40px;
    		background-color: #18b4ed;
    		margin:auto;
    		line-height:40px;
    		margin-top:2px;
    		border-radius: 50%;

    	}
    	.weihse{
    		position: relative;
    	}
    	.imgs{
    		margin-bottom: 3px;
            margin-right: 10px;
			width: 10px;
			height: 10px;
    		vertical-align:middle;
    	}
    	.imgse{
    		margin-bottom: 3px;
            margin-left: 10px;
			width: 15px;
			height: 15px;
    		vertical-align:middle;
    	}
    	.sectionse{

    	}
    	.weihsspans{
    		color:#fff;
    		font-size:15px;
    		width: 40px;
    		height:40px;
    	}
    	.weihsspan{
    		width: 40px;
    		height:40px;
    		background-color: #abdef1;
    		margin:auto;
    		border-radius: 50%;
    		line-height:40px;
    		margin-top:2px;

    		position: relative;
    		z-index:90;
    		color:#fff;
    		font-size:15px;
    	}

    	.setup{  
            padding: 5px;
            text-align: center;
        }
        .pictures-div{
    position: fixed;
    bottom: 42px;
    right: 10px;
    filter: alpha(opacity=60);
    background-color: #777;
    z-index: 1002;
    /* left: 0px; */
    opacity: 0.5;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
				
        }

    </style>
</head>
<body  style="overflow:-Scroll;overflow-y:hidden" >
		<div>
			<div class="sectionse">
			<table id="grade">
			</table>
			</div>
			<div class="k-mark"></div>
		</div>
		<div class="pictures-div" onclick="pictures();" hidden="hidden"> 拍照</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadNewData()">
				重新加载
			</button>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" hidden="hidden">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
					<strong class="weui_dialog_title">评分只能上传一次，确认上传？</strong>
				</div>
				<div class="weui_dialog_bd"></div>
				<div class="weui_dialog_ft">
						<a onclick="cleanCancelBack()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
					<a onclick="cleanConfirmSure()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
    <script src="../../script/common.js"></script>
	<script src="../../script/timeStampTool.js"></script>
	<script src="../../script/processing_images.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript">
	mui.init()
	var datase = [];
	var shan_data = [];
	// 记录点击显示扇形的布局ID
	var pievalue;
	// 记录圆环划动变换后的值
	var dravaluse;
	// 记录点击后 获取的下标
	var xiab;
	// 记录圆环是否变化
	var drav_fals = true;
	var datae = new Object();
	var uid = "";
	var pid = "";
	var selectedStu = new Array();

	var totalScore = 0;  //显示出来的总分
	var dataSource = [];  //保留数据用的
	var reallyTotalScore = 0;  //所有的总分
    var pointScore = 0;  //显示扣掉的分
    var picurl = '';

	apiready = function(){
		datae = api.pageParam.data;
		dataSource = api.pageParam.data;
		
		if(datae == "null"){
			$('#noNet').show();
		}else{
		jid = $api.getStorage("cfnetppjxid");
		uid = $api.getStorage("cfnetppuid");
		pid = $api.getStorage("sheet_pid");

		openlist(datae);
//判断是否显示拍照按钮
	api.addEventListener({
	        name:'selectctStuNotification'
        },function(ret,err){
				var tmpArrUid = $api.getStorage('tmpSelectedUid');
		    if (tmpArrUid.length > 0) {
		    	   $('.pictures-div').show();
		    }else{
		    	 $('.pictures-div').hide();
		    }
		   });
		api.addEventListener({
	        name:'sublimt'
        },function(ret,err){
				var tmpArrUid = $api.getStorage('tmpSelectedUid');
		    	if (tmpArrUid.length > 0) {
                    $('#offlineAlert').show();

		    	}else{
		    		api.toast({
		            	msg:'请先选择学生！'
	            	});
		    	}
        }
       );

		api.addEventListener({
                name: 'scrollTop'
            }, function(ret, err) {

                $('html,body').animate({scrollTop: '0px'}, 100);

            });

		
        //点击遮罩移除扇形或圆圈
		$(document).on("click",".k-mark,.circlebtn",function(e){

			removerPie();
			removeCircle();
		})
		$(document).on("click",".weihsspan,.weihsspans",function(e){
			var ids = $(this).attr('id');
			if(ids.indexOf("weihse") >= 0){
				ids = ids.replace("weihse","");
			}else{
				ids = ids.replace("weihs","");
			}
			bg = document.getElementById("bg" + ids);
			bg.style.backgroundColor="#d6edf5";
		})
		$(document).on("click",".weihsspan",function(e){
				$(this).addClass("bgcurrent")
				$(".cn-wrapper").remove();
				var thisObj=$(this).parent();
				var thisBtn=$(this);
				thisBtn.css({"z-index":"103"});
				if(datase[xiab].fallscore == "0.5"){
					var sx = (parseFloat(datase[xiab].score))*2 + 1;
				}else{
					var sx = (parseFloat(datase[xiab].score))/(parseFloat(datase[xiab].fallscore)) + 1;
				}
				var index_fen = 0;
				for(var i = 0;i<sx;i++){
					shan_data[i] = index_fen;
					if(datase[xiab].fallscore == "0.5"){
						index_fen = index_fen + 0.5;
					}else{
						index_fen = index_fen + parseFloat(datase[xiab].fallscore);
					}

				}
				drawPie(sx,e,thisObj);
		})
		$(document).on("click",".circlebtn",function(e){
			var ID = "weihs" + xiab;
            s = document.getElementById(ID);

            var oldValue = parseInt($("#"+ID).html());   //获得上一次的值
// alert(oldValue);
            // if(dravaluse == undefined){
            // 	dravaluse = 0;
            // 	// alert("没有定义"+dravaluse);
            // }
            if(drav_fals){
            	pingwanScore = oldValue;
            	// alert("没有更改"+dravaluse);
            }else{
            	if(dravaluse == 0){
	            	s.innerHTML = parseInt(dravaluse);
	            	datase[xiab].resscore = dravaluse;
		            	// alert("等于0的时候"+dravaluse);
	            }else{
	            	s.innerHTML = (parseInt(dravaluse * parseInt(datase[xiab].score) / 100));
	            	datase[xiab].resscore = dravaluse * parseFloat(datase[xiab].score) / 100;

	            	// alert("不等于0时的正常评分"+dravaluse);
	            }
	            pingwanScore = parseInt(dravaluse * parseInt(datase[xiab].score) / 100); //这次评完的值
            }
             
                
            totalScore = totalScore - oldValue + pingwanScore;  //这只评完后的总分
            if (totalScore <= 0 ) {
            	$('#totalScore').html(parseFloat(0));
            }else{
            	$('#totalScore').html(parseFloat(totalScore.toFixed(2)));
            }
        	$('#pointScore').html(parseFloat((reallyTotalScore-totalScore).toFixed(2)));
            drav_fals = true;
		});

     	}
     };
	function cleanCancelBack() {
		$('#offlineAlert').hide();

	}

	//确定
	function cleanConfirmSure() {
		$('#offlineAlert').hide();
		var tmpArrUid = $api.getStorage('tmpSelectedUid');
		cleanConfirm(tmpArrUid);

	}


	function openlist(data){
		datase = [];
		for(var i = 0;i<data.data.scorelist.length;i++){
        		var item={};
        		item.rid = datae.data.scorelist[i].id; // 评分表ID
				item.title = datae.data.scorelist[i].names; // 评分项名称
				item.score = datae.data.scorelist[i].score; // 评分项的总分数
				item.resscore = datae.data.scorelist[i].score; //该项评分后的得分
				if (datae.data.scorelist[i].fallscore == null) {
                    item.fallscore = '0';
				}else{
					item.fallscore = datae.data.scorelist[i].fallscore;
				}
				 // 评分项or小项（小项的每次扣分为0）
        		datase.push(item); 
        }
        		ListView(datase);
	}
	function ListView(data){

		var dar = '<tbody >' + '<tr>' + '<td>' + '项目'  + '</td>' + '<td>' + '分数'  + '</td>' +'<td>' + '扣分'  + '</td>' +'<td>' + '操作'  + '</td>' + '</tr>'+ '<tr>' + '<td>' + '总分'  + '</td>' + '<td id="totalScore">' + '</td>' +'<td id="pointScore">' + '</td>' +'<td>' + ''  + '</td>' + '</tr>';
		for(var i = 0;i<data.length;i++){
			if(data[i].fallscore == "0"){
				dar = dar + '<tr id="bg' + i + '" style="background-color:#f0f0f0;">' + '<td class="setup base_title_font">' + data[i].title + '</td>' + '<td class="base_title_font">' + data[i].score + '</td>' +'<td>'+"&nbsp;"+ '</td>'+'<td >' + '<div class="weihs base_title_font" onclick="drawCircle('+i+','+ data[i].resscore +');">' + '<span class="weihsspans " id="weihs' + i + '">' + data[i].resscore + '</span>' + '</div></td>' +'</tr>';
				totalScore += parseInt(data[i].resscore);
				reallyTotalScore += parseInt(data[i].score);

			}else{
				var koufenCommon = data[i].fallscore.toFixed(2); //保留2位小数

				var time = (parseInt(data[i].score*100)) / (parseInt(koufenCommon*100));
				
				dar = dar + '<tr id="bg' + i + '" style="background-color: #ffffff;">' + '<td class="setup base_content_font">' + data[i].title + '</td>' + '<td style="width:50px;" class="base_content_font">' + data[i].score + '</td>' +'<td style="width:50px;" class="base_content_font">'+parseFloat(koufenCommon)+'</td>'+'<td style="width: 80px;text-align:center;vertical-align:middle;position:relative;" class="base_content_font"'+ 
                    '<div style="width:80px;height:40px;text-align:center;vertical-align:middle;position:relative;">'+

                    '<img style="position:absolute;width:20px;height:20px;line-height:20px;top:10px;left:10px;" class="jia" id="jia'+i+'" onclick="add('+i+','+time+','+koufenCommon+')" src="../../image/icon_jiahao2.png" alt="">'+
                    '<span id="koufen'+i+'" style="position:absolute;width: 20px;height:20px;line-height:20px;left:30px;top:10px;">'+
                        0+
                    '</span>'+
                    '<img style="position:absolute;width:20px;height:20px;right:10px;top:10px;" class="jian" id="jian'+i+'" onclick="jian('+i+','+koufenCommon+')" src="../../image/icon_jianhao.png" alt=""></div>'

                    +'</td>'+'</tr>';
			}

		}
		x=document.getElementById("grade"); //获取到Table标签
		x.innerHTML=dar + '</tbody>';
		$('#totalScore').html(parseFloat(totalScore.toFixed(2)));
		$('#pointScore').html(parseFloat((reallyTotalScore-totalScore).toFixed(2)));
	}
	function score_change(id){
		xiab = id;
		pievalue = "weihse" + id;
	}
	//画扇形
		function drawPie(len,e,thisObj){
			//len为扇形的个数
			var rotate=180/len;
			//	圆心角
			var skew=90-rotate;
			//切角
			var rotateA=90/len/2-90;
			thisObj.append('<div class="cn-wrapper"><ul class="cn-piecon"></ul></div>');
			for(var i=0;i<len;i++){
				$(".cn-piecon").append('<li><a href="###"><i>'+(shan_data[i])+'</i></a></li>');
				$(".cn-wrapper li:nth-child("+(i+1)+")").css({
					"transform":"rotate("+(180-rotate*(i+1))+"deg) skew("+skew+"deg)",

				});
			}
			//文字的旋转角
			$(".cn-wrapper li a").css({
				"transform":" skew("+(-skew)+"deg) rotate("+rotateA+"deg)",

			});
			if(xiab == (datase.length - 1)){
				var posY=e.clientY - 130;
			}else{
				var posY=e.clientY - 80;
			}
			setTimeout(function(){
				$(".cn-wrapper").css({
					"transform":"scale(1) rotate(-90deg)",

				})
			},50)
			$('.k-mark').show();

		}
		//点击扇形
		function pieClick(){
			$(document).on("click",".cn-wrapper li",function(e){
				var liIndex=$(this).index();
				$(".cn-wrapper li:lt("+(liIndex+1)+")").css({"background":" #18b4ed"});
				$(".cn-wrapper li:gt("+liIndex+")").css({"background":" #5fd4ff"});
//				console.log($(this).children().children().text())
				s = document.getElementById(pievalue);
				var inr = $(this).children().children().text();
				if(inr == "0"){
					s.innerHTML = "0";
				}else{
					if((parseFloat(inr)+"").indexOf(".")>=0){
						s.innerHTML = parseFloat(inr);
					}else{
						s.innerHTML = parseFloat(inr);
					}
				}

				datase[xiab].resscore = parseFloat($(this).children().children().text());
                //删除扇形
				removerPie()
			})
		}
	//画拖动圆环
	function drawCircle(vale,indexValue){
		xiab = vale;
		var strTransformNum = parseInt(indexValue); 
        
		$(".sectionse").append(' <div class="circlecon">'+
           '<input class="knob" data-width="200" data-thickness=.05 data-fgColor="#18b4ed" data-linecap=round data-min="0" data-angleOffset="0" data-displayPrevious=true value="0" disabled="">'+
           '<button type="button" class="mui-btn mui-btn-primary circlebtn base_style_color">确定</button>'+
        '</div>');
        	$('.k-mark').show();
        	// $(".knob").val(strTransformNum);
			$(".knob").knob({
                change : function (value) {
                    
                    $(".knob").val(parseInt(value/100*strTransformNum));

                },
                release : function (value) {
                	dravaluse = value;
                	drav_fals = false;
                },
                cancel : function () {
                },
            });
            var val,up=0,down=0,i=0
                ,$idir = $("div.idir")
                ,$ival = $("div.ival")
                ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
            $("input.infinite").knob(
                {
	                'min':0
	                ,'max':20
	                ,'stopper':false
	                ,'change':function(v){
	                    if(val>v){
	                        if(up){
	                            decr();
	                            up=0;
	                        }else{up=1;down=0;}
	                    }else{
	                        if(down){
	                            incr();
	                            down=0;
	                        }else{down=1;up=0;}
	                    }
	                    val=v;
	                }
                }
            );
            $(".knob").css("color","#18b4ed");
		}
	//删除滑动圆环
	function removeCircle(){
		bg = document.getElementById("bg" + xiab);
			if(datase[xiab].fallscore == "0.00"){
				bg.style.backgroundColor="#f0f0f0";
			}else{
				bg.style.backgroundColor="#ffffff";
			}
		$('.k-mark').hide();
		$(".mui-table-view-cell").removeClass("bgcurrent");
		 $(".circlecon").hide();
		setTimeout(function(){
			$(".circlecon").remove()
			$(".weihsspan").css({"z-index":"90"});
		},500)	
	}
	//删除扇形
	function removerPie(){
		bg = document.getElementById("bg" + xiab);
			if(datase[xiab].fallscore == "0.00"){
				bg.style.backgroundColor="#f0f0f0";
			}else{
				bg.style.backgroundColor="#ffffff";
			}
		setTimeout(function(){
				$(".cn-wrapper").css({"transform":"scale(0.01) rotate(-90deg)"})
			},200)
			setTimeout(function(){
				$(".cn-wrapper").remove()
				$(".weihsspan").css({"z-index":"90"});
			},700)
			$('.k-mark').hide();
	}
   function cleanConfirm(stu_uid){
     showProgress();
   	 if(picurl != '') {
		UploadFile_ali(Upload_File_img,picurl, function(ret) {
			if (ret) {
             var  fileurl = ret.fileurl;
			   uploaddata(stu_uid,fileurl);
				}
			});	
		 }else{
	      uploaddata(stu_uid,'')
		}
   }
   
		//确定
	function uploaddata(stu_uid,fileurl) {
//			var de = stu_uid;
			var upStr = "";
			var sse = stu_uid;


			var sl = sse.length; //0
			var dl = datase.length;  //2
			showProgress();
			for(var y = 0;y<sl;y++){
				for(var i = 0;i<dl;i++){

				var laterKoufen = "";
                if (datase[i].fallscore == "0") {
                    laterKoufen = parseInt(datase[i].resscore);
                }else{
                   var id = "koufen" + i;    //计算操作界面扣完分的代码块
				    var old = document.getElementById(id);
				    var oldValue = old.innerHTML;
				    var oldInt = parseInt(oldValue);
	        		laterKoufen = parseInt(datase[i].resscore - datase[i].fallscore * oldInt);
                }
	            	upStr = upStr + "{\"rid\":\"" + datase[i].rid + "\",\"types\":\"" + 1 + "\",\"score\":\""
						+ laterKoufen + "\",\"uid\":\"" + sse[y] + "\",\"uid2\":\""
						+ uid +
						"\",\"pid\":\"" + pid + "\"},"
	            }
			}

	         upStr = upStr.substring(0,(upStr.length-1));
	         
//	         var message=$api.getStorage('tmpSelectedName').toString()+'的评分';
//              
//              
             var tmp_selected_name = $api.getStorage("tmpSelectedName");
	         if (tmp_selected_name == null || tmp_selected_name == undefined) {
	         	tmp_selected_name = '';
	         }
             var message = tmp_selected_name+'的评分';
             var param = {
				   values : {
				     data: "[" + upStr + "]",
				     jid : $api.getStorage('cfnetppjxid'),
				      picurl : fileurl,
				   },
			    
//				   uid : $api.getStorage('cfnetppuid'),
//				   jid : $api.getStorage('cfnetppjxid'),
//				   pid:$api.getStorage('sc_pid'),
//				   cid:$api.getStorage('sc_cid'),
//				   vid:$api.getStorage('sc_vid'),
				   	 
				
			};
//console.log(JSON.stringify(param));

	         api.ajax({
	            url:url_setSitenowScore,
	            method: 'post',
   				timeout: 30,
    			dataType: 'json',
    			returnAll:false,
    			data:param

            },function(ret,err){
//          console.log(JSON.stringify(ret));
                    param["message"]=message;
            		//coding...
              	 	hideProgress();
              	 	SendBusinessOperationsLogNotifi('教师评分页', '046', param, param, '', ret, '现场实操教师评分上传接口', '046-01')
              	 	$api.setStorage('tmpSelectedName', '');
              	 	$api.setStorage('stu_list_uid',"");
              	 	$api.setStorage('stu_names',"");
              	   var code = parseInt(ret.code);
              	 	if(code == 200){
              	 		$api.setStorage('tmpSelectedUid', '');
              	 		$api.setStorage('tmpSelectedName', '');
                         
              	 		api.sendEvent({
              	 		    name: 'loadnew',
              	 		});
              	 	 ShowToast("评分上传成功！");
	               setTimeout(function () {
              	 		var y=document.getElementById("grade"); // 这3行为了评论完一个刷新表格,恢复为满分状态
						y.innerHTML='';
						totalScore = 0;
              	 		openlist(dataSource);
						$('#totalScore').html(totalScore);
						$('#pointScore').html(0);
						$api.setStorage('tmpSelectedUid', '');
						$api.setStorage('tmpSelectedName', '');
						}, 1000);
				

              	 	}else{
              	 	 if (code == "114") {
                        ShowToast("此评分已经上传，请查看我的成绩！");
            		 }else {
              	 	    ShowToast("评分上传失败！");
            		 }
              	 	}

            });
	}
	//重新加载数据
	function loadNewData() {
		$('#noNet').hide();
		$('#noData').hide();
		api.sendEvent({
	        name:'loadnew'
        });
       	api.closeFrameGroup({
	           name: 'groups'
           });
	}

function add (index,time,fallscore) { //   $('#totalScore').html(totalScore);
	var id = "koufen" + index;

    var old = document.getElementById(id);
    var oldValue = old.innerHTML;
    var oldInt = parseInt(oldValue);
    var newInt = oldInt + 1;

    var notJia = "jia" + index;
    var notJian = "jian" + index;

    if (newInt <= time) {
    	old.innerHTML = newInt;

    	totalScore -= fallscore;
    	if (totalScore > 0) {
            $('#totalScore').html(parseFloat(totalScore.toFixed(2)));
    	}else{
            $('#totalScore').html(0);
    	}
    	$('#pointScore').html(parseFloat((reallyTotalScore-totalScore).toFixed(2)));
    }
    if (newInt == time) {
    	
    	$('#notJia').attr('src','../../image/icon_huisejiahao.png');

    }
    if (newInt < time) {

    	$('#notJia').attr('src','../../image/icon_jiahao2.png');
    	
    }
    	$('#notJian').attr('src','../../image/icon_jianhao.png');

}
function jian (index,fallscore) {
	var id = "koufen" + index;

    var old = document.getElementById(id);
    var oldValue = old.innerHTML;
    var oldInt = parseInt(oldValue);
    var newInt = oldInt - 1;
    if (newInt >= 0) {
    	old.innerHTML = newInt;

    	totalScore += fallscore;
    	if (totalScore > 0) {
            $('#totalScore').html(parseFloat(totalScore.toFixed(2)));
    	}else{
            $('#totalScore').html(0);
    	}
    	$('#pointScore').html(parseFloat((reallyTotalScore-totalScore).toFixed(2)));
    }
    if (newInt > 0) {
    	var notJian = "jian" + index;

    	$('#notJian').attr('src','../../image/icon_jianhao.png');
    }
    if (newInt == 0) {
    	var notJian = "jian" + index;

        $('#notJian').attr('src','../../image/icon_huisejianhao.png');
    }
    var notJia = "jia" + index;

    	$('#notJia').attr('src','../../image/icon_jiahao2.png');

}
function pictures(){
		api.getPicture({
							sourceType : 'camera',
							encodingType : 'png',
							mediaValue : 'pic',
							destinationType : 'url',
							allowEdit : true,
							quality : 50,
							saveToPhotoAlbum : false
						}, function(ret, err) {
						
							if (ret) {
						
								picurl = ret.data;
			
							} 
						});
}
</script>
</html>